<template>
  <div>
    <a-card title="教师评价设置">
      <a-row :gutter="16" style="margin-bottom: 16px">
        <a-col :span="6">
          <a-select
            v-model="searchForm.semester"
            placeholder="请选择学期"
            style="width: 100%"
            allowClear
          >
            <a-select-option v-for="item in semesterOptions" :key="item.value" :value="item.value">
              {{ item.label }}
            </a-select-option>
          </a-select>
        </a-col>
        <a-col :span="6">
          <a-select
            v-model="searchForm.college"
            placeholder="请选择学院"
            style="width: 100%"
            allowClear
          >
            <a-select-option v-for="item in collegeOptions" :key="item.value" :value="item.value">
              {{ item.label }}
            </a-select-option>
          </a-select>
        </a-col>
        <a-col :span="6">
          <a-input v-model="searchForm.teacherName" placeholder="请输入教师姓名" />
        </a-col>
        <a-col :span="6" style="text-align: right">
          <a-button type="primary" @click="handleSearch">查询</a-button>
          <a-button style="margin-left: 8px" @click="resetSearch">重置</a-button>
        </a-col>
      </a-row>

      <a-table
        :columns="columns"
        :dataSource="data"
        :pagination="pagination"
        rowKey="id"
        bordered
      >
        <template slot="status" slot-scope="text, record">
          <a-switch
            :checked="text"
            @change="(checked) => changeStatus(record.id, checked)"
            checkedChildren="启用"
            unCheckedChildren="禁用"
          />
        </template>
        <template slot="operation" slot-scope="text, record">
          <a-button type="link" size="small" @click="showDetail(record)">详情</a-button>
          <a-button type="link" size="small" @click="editSetting(record)">编辑</a-button>
        </template>
      </a-table>
    </a-card>

    <a-modal
      title="教师评价指标设置"
      :visible="detailVisible"
      width="800px"
      @ok="handleDetailOk"
      @cancel="handleDetailCancel"
      :footer="null"
    >
      <a-tabs defaultActiveKey="1">
        <a-tab-pane tab="评价指标" key="1">
          <a-table
            :columns="detailColumns"
            :dataSource="detailData"
            :pagination="false"
            rowKey="id"
            bordered
          >
            <template slot="weight" slot-scope="text, record">
              <a-input-number
                v-model="record.weight"
                :min="0"
                :max="100"
                :precision="2"
                :formatter="(value) => `${value}%`"
                :parser="(value) => value.replace('%', '')"
                style="width: 100%"
              />
            </template>
          </a-table>
          <div style="margin-top: 16px; text-align: right">
            <a-button type="primary" @click="saveWeights">保存权重</a-button>
          </div>
        </a-tab-pane>
        <a-tab-pane tab="评价说明" key="2">
          <a-form :form="detailForm" :label-col="{ span: 3 }" :wrapper-col="{ span: 20 }">
            <a-form-item label="评价说明">
              <a-textarea
                v-decorator="['description']"
                placeholder="请输入评价说明"
                :autoSize="{ minRows: 4, maxRows: 8 }"
              />
            </a-form-item>
            <a-form-item :wrapper-col="{ span: 20, offset: 3 }">
              <a-button type="primary" @click="saveDescription">保存说明</a-button>
            </a-form-item>
          </a-form>
        </a-tab-pane>
      </a-tabs>
    </a-modal>
  </div>
</template>

<script>
const columns = [
  {
    title: '学期',
    dataIndex: 'semester',
    key: 'semester'
  },
  {
    title: '教师姓名',
    dataIndex: 'teacherName',
    key: 'teacherName'
  },
  {
    title: '所属学院',
    dataIndex: 'college',
    key: 'college'
  },
  {
    title: '职称',
    dataIndex: 'title',
    key: 'title'
  },
  {
    title: '评价开始时间',
    dataIndex: 'startTime',
    key: 'startTime'
  },
  {
    title: '评价结束时间',
    dataIndex: 'endTime',
    key: 'endTime'
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    scopedSlots: { customRender: 'status' }
  },
  {
    title: '操作',
    key: 'operation',
    scopedSlots: { customRender: 'operation' }
  }
]

const detailColumns = [
  {
    title: '指标名称',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: '指标说明',
    dataIndex: 'description',
    key: 'description',
    ellipsis: true
  },
  {
    title: '权重(%)',
    dataIndex: 'weight',
    key: 'weight',
    scopedSlots: { customRender: 'weight' }
  }
]

const data = [
  {
    id: '1',
    semester: '2024-2024学年第一学期',
    teacherName: '王芳',
    college: '信息工程系',
    title: '教授',
    startTime: '2024-09-01 08:00',
    endTime: '2024-09-30 23:59',
    status: true
  },
  {
    id: '2',
    semester: '2024-2024学年第一学期',
    teacherName: '李廷',
    college: '机电工程系',
    title: '副教授',
    startTime: '2024-09-01 08:00',
    endTime: '2024-09-30 23:59',
    status: false
  }
]

const detailData = [
  {
    id: '1',
    name: '教学态度',
    description: '教师教学态度是否认真负责，关心学生',
    weight: 30
  },
  {
    id: '2',
    name: '教学内容',
    description: '教学内容是否充实、前沿、符合教学目标',
    weight: 25
  },
  {
    id: '3',
    name: '教学方法',
    description: '教学方法是否多样、有效，能激发学生学习兴趣',
    weight: 25
  },
  {
    id: '4',
    name: '教学效果',
    description: '学生知识掌握和能力提升情况',
    weight: 20
  }
]

export default {
  data() {
    return {
      columns,
      detailColumns,
      data,
      detailData,
      pagination: {
        current: 1,
        pageSize: 10,
        total: 2,
        showSizeChanger: true,
        pageSizeOptions: ['10', '20', '50'],
        showTotal: (total) => `共 ${total} 条`
      },
      searchForm: {
        semester: undefined,
        college: undefined,
        teacherName: ''
      },
      semesterOptions: [
        { value: '1', label: '2024-2024学年第一学期' },
        { value: '2', label: '2024-2024学年第二学期' }
      ],
      collegeOptions: [
        { value: '1', label: '信息工程系' },
        { value: '2', label: '机电工程系' },
        { value: '3', label: '建筑工程系' },
        { value: '4', label: '化学学院' }
      ],
      detailVisible: false,
      currentRecord: null,
      detailForm: this.$form.createForm(this)
    }
  },
  methods: {
    handleSearch() {
      console.log('查询条件:', this.searchForm)
    },
    resetSearch() {
      this.searchForm = {
        semester: undefined,
        college: undefined,
        teacherName: ''
      }
    },
    changeStatus(id, checked) {
      console.log(`修改ID为${id}的状态为${checked ? '启用' : '禁用'}`)
      this.$message.success('状态修改成功')
    },
    showDetail(record) {
      this.currentRecord = record
      this.detailVisible = true
      this.$nextTick(() => {
        this.detailForm.setFieldsValue({
          description: '这里是教师评价说明内容，可以根据实际情况进行编辑。'
        })
      })
    },
    editSetting(record) {
      console.log('编辑设置:', record)
      this.$message.info('跳转到编辑页面')
    },
    handleDetailOk() {
      this.detailVisible = false
    },
    handleDetailCancel() {
      this.detailVisible = false
    },
    saveWeights() {
      console.log('保存权重:', this.detailData)
      this.$message.success('权重保存成功')
    },
    saveDescription() {
      this.detailForm.validateFields((err, values) => {
        if (!err) {
          console.log('保存说明:', values)
          this.$message.success('评价说明保存成功')
        }
      })
    }
  }
}
</script>